<script>
    $("body").removeClass();
    $("body").addClass("friend-list");
</script>

<style>
    .group_page{
        padding-bottom: 15px;
        min-height: 598px;
    }
</style>

<div id="body" class="layout">
    <div class="wrap">
        <div class="left" id="Left">
            <ul class="sort-panel">
                <li class="s-text">Search events:</li>
                <li>
                    <a href="<?php echo $this->baseUrl(''); ?>">
                        <span class="first">
                            <span class="last">
                                <span class="middle">
                                    Home
                                </span>
                            </span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="<?php echo $this->baseUrl("friend-list"); ?>" class="current selected">
                        <span class="first">
                            <span class="last">
                                <span class="middle">
                                    Friends List
                                </span>
                            </span>
                        </span>
                    </a>
                </li>
            </ul>
            <div class="cf"></div>
            <div class="create-group">
                <a href="#create-group" id="btcreate-group" class="rbox bluebutton2 fl"><span class="p">+</span><span>Create Group</span></a>
            </div>
            <div class="fr ptitle">
                Friends <strong>List</strong>
            </div>

            <?php
//                prd(count($this->friendGroupsAndFriends));
                $fg_i = "1";
                $_flag = "1";
                if (!empty($this->friendGroupsAndFriends))
                {
                    $__counter = 0;
                    foreach ($this->friendGroupsAndFriends as $fg_key => $fg_value)
                    {
                        if (!empty($fg_value))
                        {
                            $group_id = $fg_value["group_id"];
                            $group_name = $fg_value["group_name"];


                            if ($__counter == 0 || $__counter % 9 == 0)
                            {

                                //echo $__counter;

                                if ($__counter != 0)
                                    echo "</div>";

                                echo "<div class='group_page " . ($__counter == 0 ? 'active' : '') . "' id='group-page-" . (($__counter / 9) + 1) . "'>";
                            }

                            if ($fg_i == "1")
                            {
                                echo '<div class="cf"></div><div class="list-fr">';
                            }
                            ?>
                            <div class="col friends">
                                <div class="cwrap">
                                    <!--<span class="title"><span class="blu"><strong>Close</strong></span> Friends</span>-->
                                    <span class="title"><span class="blu"><strong><?php echo $group_name; ?></strong></span></span>

                                    <?php
                                    if (!empty($fg_value["friends_records"]))
                                    {
                                        echo '<ul>';
                                        //$__counter = 0;
                                        foreach ($fg_value["friends_records"] as $fr_key => $fr_value)
                                        {
                                            $friend_id = $fr_value["user_id"];
                                            $friend_name = $fr_value["user_first_name"] . " " . $fr_value["user_last_name"];
                                            $friend_image = getUserImage($friend_id);
                                            ?>
                                            <li>
                                                <a id="show-profile-test" href="#show-profile-<?php echo $friend_id; ?>" class="sprofile tips show-profile-test" tips="<?php echo $friend_name; ?>">
                                                    <span class="bg"></span>
                                                    <span class="icon del remove-friend" rel="<?php echo $friend_id; ?>" data-group ="<?php echo $group_id; ?>" ></span>
                                                    <img src="<?php echo getUrl($friend_image); ?>" alt="<?php echo $friend_name; ?>" />
                                                </a>
                                            </li>

                                            <?php
                                            //$__counter++;
                                        }
                                        echo '</ul>';
                                    }
                                    else
                                    {
                                        echo '<h3 style="padding:10px;">No friends under this group</h3>';
                                    }
                                    ?>
                                    <div class="cf"></div>
                                </div>
                                <?php
                                if ($group_id != "others")
                                {
                                    ?>
                                    <a href="<?php echo $this->baseUrl("edit-friend-group/$group_id"); ?>" class="edit fl tlink">Edit</a>
                                    <a href="<?php echo $this->baseUrl("delete-friend-group/$group_id"); ?>" class="remove fr tlink" onclick="return confirm('Are you sure?');">Remove</a>
                                    <?php
                                }
                                ?>
                            </div>
                            <?php
                            $fg_i++;
                            if ($fg_i == "4")
                            {
                                echo '</div>';

                                if (count($this->friendGroupsAndFriends) - 1 == $fg_key)
                                    echo "</div>";
                                $fg_i = "1";
                                $_flag = "2";
                            }
                            else
                            {
                                if (count($this->friendGroupsAndFriends) - 1 == $fg_key)
                                {
                                    echo "</div>";
                                    //if($__counter%6 != 0 )
                                    echo "</div>";
                                }
                                $_flag = "1";
                            }
                        }

                        $__counter++;
                    }
                }

                if ($_flag == "2")
                    echo '<div class="cf"></div><div class="list-fr"></div>';

                //echo $__counter;
            ?>

            <?php
//                prd(count($this->friendGroupsAndFriends));
                if (count($this->friendGroupsAndFriends) > "9")
                {
                    ?>
                    <div class="bottom-main">
                        <div class="text">You are here:</div>
                        <ul class="paging group client-side" data-context="group">
                            <li class="np" data-href="#prev"><a href="#prev">&lt; Prev.</a></li>
                            <li class="current" data-href="#group-page-1">
                                <span class="first">
                                    <span class="last">
                                        <span class="middle">
                                            Page 1
                                        </span>
                                    </span>
                                </span>
                            </li>
                            <?php
                            for ($_i = 1; $_i <= ceil($__counter / 9); $_i++)
                            {

                                if ($_i == 1)
                                    continue;
                                ?>
                                <li data-href="#group-page-<?= $_i ?>"><a id="group-anchor-<?= $_i ?>" href="#group-page-<?= $_i ?>"><?= $_i ?></a></li>

                                <?php
                            }
                            ?>
                            <li class="np" data-href="#next"><a href="#next">Next &gt;</a></li>
                        </ul>
                        <div class="cf"></div>
                    </div>
                    <?php
                }
            ?>

            <a></a>
            <p></p>
        </div>
        <!--</div>-->
        <div class="right">
            <?php
                echo $this->partial("ads.phtml", array("ads_count" => "3"));
            ?>
        </div>
        <div class="cf"></div>
    </div>
</div>

<div class="alert-message" id="create-group">
    <div class="am-wrapper">
        <a href="#close" class="close-button"></a>
        <div class="title">
            Create <strong>Group</strong>
        </div>
        <form id="group-form" method="post" action="<?php echo $this->baseUrl("create-friend-group"); ?>">
            <div class="field">
                <div class="fl icon"><img src="<?php echo IMAGES_PATH; ?>/active-icon.png" alt="active"></div>
                <div class="f-input fl">
                    <!--<input type="text" class="radius input" value="Group Name" onfocus="this.style.borderColor = '#1996d4'" onblur="this.style.borderColor = '#cfcfcf'" style="border-color: rgb(207, 207, 207);">-->
                    <input type="text" name="group_name" class="radius input" placeholder="Group Name" style="border-color: rgb(207, 207, 207);"/>
                </div>
                <div class="cf"></div>
                <div class="note">Choose a name for this group</div>
            </div>
            <div class="field fcreate">
                <!--<a href="#" class="bluefbutton fr">Create</a>-->
                <input type="submit" name="group_btn_submit" class="bluefbutton fr" value="Create"/>
                <div class="cf"></div>
            </div>
        </form>   
    </div>
</div>

<?php
    //echo $this->partialLoop('profilepopup.phtml', $this->friendGroupsAndFriends);
    $this->getHelper('Profile')->init($this->user_id);
?>

<script type="text/javascript">
    $(document).ready(function() {

        $(".remove-friend").click(function() {
            var remove_cnfrm = Confirm("Confirm Box", 'Are you sure you want to remove friend?', $(this).attr("rel"), $(this).data('group'));
            return false;
        });

        $(".bookmark").live("click", function(event) {
            event.preventDefault();
            $(this).removeClass("bookmark");
            $(this).addClass("uncheck");
            $(this).html("Shared");
        });

        $(".uncheck").live("click", function(event) {
            event.preventDefault();
            $(this).removeClass("uncheck");
            $(this).addClass("bookmark");
            $(this).html("Share event");
        });

        $('.show-profile .close-button, .lytebox-overlay').live('click', function() {
            //window.location.href = window.location.href.split("#")[0];
        });
    });
</script>